<template>
    <view class="container">
        <view class="pet-card">
            <view class="pet-header">
                <view class="pet-avatar-container">
                    <image class="pet-avatar" :src="getPetImage()" mode="aspectFit"></image>
                    <view class="level-badge">
                        <text>Lv.{{ pet.level }}</text>
                    </view>
                </view>
                <view class="pet-info">
                    <input 
                        class="pet-name-input"
                        v-model="petName"
                        placeholder="给宠物起个名字"
                        @blur="updatePetName"
                    />
                    <view class="exp-bar">
                        <view class="exp-progress" :style="{ width: expPercentage + '%' }"></view>
                        <text class="exp-text">{{ pet.exp }}/{{ nextLevelExp }}</text>
                    </view>
                </view>
            </view>
        </view>
        
        <!-- 宠物统计信息 -->
        <view class="stats-grid">
            <view class="stat-item">
                <image src="/static/icons/clock.svg" mode="aspectFit"></image>
                <text class="stat-label">游戏时长</text>
                <text class="stat-value">{{ gameTime }}</text>
            </view>
            <view class="stat-item">
                <image src="/static/icons/heart.svg" mode="aspectFit"></image>
                <text class="stat-label">互动次数</text>
                <text class="stat-value">{{ interactionCount }}</text>
            </view>
            <view class="stat-item">
                <image src="/static/icons/star.svg" mode="aspectFit"></image>
                <text class="stat-label">成就数</text>
                <text class="stat-value">{{ completedAchievements }}/{{ totalAchievements }}</text>
            </view>
        </view>
        
        <!-- 成就列表 -->
        <view class="achievements-section">
            <text class="section-title">成就</text>
            <view class="achievements-list">
                <view 
                    v-for="achievement in achievements"
                    :key="achievement.id"
                    class="achievement-item"
                    :class="{ completed: achievement.completed }"
                >
                    <view class="achievement-icon">
                        <text class="icon-text">{{ achievement.icon }}</text>
                    </view>
                    <view class="achievement-info">
                        <text class="achievement-name">{{ achievement.name }}</text>
                        <text class="achievement-desc">{{ achievement.description }}</text>
                        <view class="achievement-progress">
                            <view class="progress-bar">
                                <view 
                                    class="progress" 
                                    :style="{ width: achievement.progress + '%' }"
                                ></view>
                            </view>
                            <text class="progress-text">{{ achievement.progress }}%</text>
                        </view>
                    </view>
                    <view class="achievement-reward" v-if="achievement.completed">
                        <text class="reward-text">+{{ achievement.reward }}</text>
                    </view>
                </view>
            </view>
        </view>
        <view class="background-animation">
            <view class="bubble" v-for="i in 10" :key="i"></view>
        </view>
    </view>
</template>

<script>
import { mapState } from 'vuex'

export default {
    data() {
        return {
            petName: ''
        }
    },
    computed: {
        ...mapState({
            pet: state => state.pet,
            inventory: state => state.inventory
        }),
        
        expPercentage() {
            return (this.pet.exp / this.pet.expToNextLevel) * 100
        },
        
        nextLevelExp() {
            return this.pet.expToNextLevel
        },
        
        gameTime() {
            const startTime = this.pet.stats?.gameStartTime || Date.now()
            const playTime = Math.floor((Date.now() - startTime) / 1000)
            
            if (playTime < 60) {
                return playTime + '秒'
            } else if (playTime < 3600) {
                return Math.floor(playTime / 60) + '分钟'
            } else {
                return Math.floor(playTime / 3600) + '小时'
            }
        },
        
        interactionCount() {
            return this.pet.stats.interactions || 0
        },
        
        achievements() {
            const achievementsList = [
                {
                    id: 'ACHIEVEMENT_FEEDER',
                    name: '美食家',
                    description: '喂食10次',
                    icon: '🍖',
                    reward: 200
                },
                {
                    id: 'ACHIEVEMENT_MASTER_FEEDER',
                    name: '美食大师',
                    description: '喂食50次',
                    icon: '👨‍🍳',
                    reward: 500
                },
                {
                    id: 'ACHIEVEMENT_PLAYER',
                    name: '玩乐达人',
                    description: '玩耍10次',
                    icon: '🎮',
                    reward: 200
                },
                {
                    id: 'ACHIEVEMENT_MASTER_PLAYER',
                    name: '欢乐大师',
                    description: '玩耍50次',
                    icon: '🎯',
                    reward: 500
                },
                {
                    id: 'ACHIEVEMENT_SLEEPER',
                    name: '睡神',
                    description: '休息10次',
                    icon: '😴',
                    reward: 200
                },
                {
                    id: 'ACHIEVEMENT_HIGH_LEVEL',
                    name: '成长之星',
                    description: '达到10级',
                    icon: '⭐',
                    reward: 1000
                }
            ]

            return achievementsList.map(achievement => {
                const achievementData = this.pet.achievements[achievement.id]
                return {
                    ...achievement,
                    completed: achievementData ? achievementData.completed : false,
                    progress: achievementData ? achievementData.progress : 0,
                    claimed: achievementData ? achievementData.claimed : false
                }
            })
        },
        
        completedAchievements() {
            return Object.values(this.pet.achievements).filter(a => a.completed).length
        },
        
        totalAchievements() {
            return Object.keys(this.pet.achievements).length
        }
    },
    methods: {
        getPetImage() {
            return '/static/pet/default.png' // 默认宠物图片
        },
        
        updatePetName() {
            if (this.petName.trim()) {
                this.$store.commit('updatePetName', this.petName.trim())
            }
        },
        
        getAchievementIcon(id) {
            const icons = {
                firstPet: '/static/achievements/firstPet.svg',
                dailyCare: '/static/achievements/dailyCare.svg',
                masterTrainer: '/static/achievements/masterTrainer.svg',
                gourmet: '/static/achievements/gourmet.svg'
            }
            return icons[id] || '/static/achievements/default.svg'
        }
    },
    onShow() {
        this.petName = this.pet.name
    }
}
</script>

<style lang="scss">
@import '@/common/styles/common.scss';

.container {
    min-height: 100vh;
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
    position: relative;
    overflow: hidden;
    padding: 20rpx;
}

.pet-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    border-radius: 30rpx;
    padding: 40rpx;
    margin: 20rpx;
    box-shadow: 0 8rpx 32rpx rgba(31, 38, 135, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.18);
    position: relative;
    z-index: 2;
    
    .pet-header {
        display: flex;
        align-items: center;
        margin-bottom: 40rpx;
        
        .pet-avatar-container {
            position: relative;
            margin-right: 40rpx;
            
            .pet-avatar {
                width: 180rpx;
                height: 180rpx;
                border-radius: 90rpx;
                border: 6rpx solid rgba(255, 255, 255, 0.8);
                box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
                transition: transform 0.3s ease;
                
                &:active {
                    transform: scale(0.95);
                }
            }
            
            .level-badge {
                position: absolute;
                bottom: -10rpx;
                right: -10rpx;
                background: linear-gradient(135deg, #FF6B6B, #FFE66D);
                padding: 8rpx 20rpx;
                border-radius: 20rpx;
                box-shadow: 0 4rpx 12rpx rgba(255, 107, 107, 0.3);
                
                text {
                    color: white;
                    font-size: 24rpx;
                    font-weight: bold;
                    text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
                }
            }
        }
        
        .pet-info {
            flex: 1;
            
            .pet-name-input {
                font-size: 40rpx;
                font-weight: bold;
                color: #333;
                margin-bottom: 20rpx;
                background: transparent;
                border: none;
                width: 100%;
                padding: 10rpx 0;
                border-bottom: 2rpx solid rgba(0, 0, 0, 0.1);
                transition: border-color 0.3s ease;
                
                &:focus {
                    border-bottom-color: #FF6B6B;
                }
            }
            
            .exp-bar {
                background: rgba(255, 255, 255, 0.5);
                border-radius: 15rpx;
                height: 30rpx;
                position: relative;
                overflow: hidden;
                box-shadow: inset 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
                
                .exp-progress {
                    height: 100%;
                    background: linear-gradient(90deg, #FFE66D, #FF6B6B);
                    transition: width 0.3s ease;
                }
                
                .exp-text {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    font-size: 20rpx;
                    color: #333;
                    font-weight: bold;
                    text-shadow: 0 1rpx 2rpx rgba(255, 255, 255, 0.8);
                }
            }
        }
    }
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20rpx;
    margin: 30rpx 20rpx;
    position: relative;
    z-index: 2;
    
    .stat-item {
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(20px);
        border-radius: 20rpx;
        padding: 30rpx 20rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        box-shadow: 0 8rpx 32rpx rgba(31, 38, 135, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.18);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        
        &:hover {
            transform: translateY(-5rpx);
            box-shadow: 0 12rpx 48rpx rgba(31, 38, 135, 0.15);
        }
        
        image {
            width: 60rpx;
            height: 60rpx;
            margin-bottom: 15rpx;
            filter: drop-shadow(0 2rpx 4rpx rgba(0, 0, 0, 0.1));
        }
        
        .stat-label {
            font-size: 24rpx;
            color: #666;
            margin-bottom: 8rpx;
            text-align: center;
        }
        
        .stat-value {
            font-size: 32rpx;
            font-weight: bold;
            color: #333;
            text-align: center;
            background: linear-gradient(135deg, #FF6B6B, #FFE66D);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 0 2rpx 4rpx rgba(255, 255, 255, 0.5);
        }
    }
}

.achievements-section {
    margin: 20rpx;
    padding: 30rpx;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 20rpx;
    
    .section-title {
        font-size: 32rpx;
        font-weight: bold;
        margin-bottom: 20rpx;
        color: #333;
    }
    
    .achievements-list {
        .achievement-item {
            display: flex;
            align-items: center;
            padding: 20rpx;
            margin-bottom: 20rpx;
            background: rgba(255, 255, 255, 0.6);
            border-radius: 16rpx;
            transition: all 0.3s;
            
            &.completed {
                background: linear-gradient(45deg, rgba(255, 230, 109, 0.2), rgba(255, 107, 107, 0.2));
                border: 2rpx solid rgba(255, 107, 107, 0.3);
                
                .achievement-icon {
                    background: linear-gradient(135deg, #FFE66D, #FF6B6B);
                }
                
                .achievement-name {
                    color: #FF6B6B;
                }
            }
            
            .achievement-icon {
                width: 80rpx;
                height: 80rpx;
                background: rgba(0, 0, 0, 0.1);
                border-radius: 12rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-right: 20rpx;
                
                .icon-text {
                    font-size: 40rpx;
                }
            }
            
            .achievement-info {
                flex: 1;
                
                .achievement-name {
                    font-size: 28rpx;
                    font-weight: bold;
                    color: #333;
                    margin-bottom: 8rpx;
                }
                
                .achievement-desc {
                    font-size: 24rpx;
                    color: #666;
                    margin-bottom: 12rpx;
                }
                
                .achievement-progress {
                    display: flex;
                    align-items: center;
                    gap: 12rpx;
                    
                    .progress-bar {
                        flex: 1;
                        height: 12rpx;
                        background: rgba(0, 0, 0, 0.1);
                        border-radius: 6rpx;
                        overflow: hidden;
                        
                        .progress {
                            height: 100%;
                            background: linear-gradient(90deg, #FFE66D, #FF6B6B);
                            transition: width 0.3s ease;
                        }
                    }
                    
                    .progress-text {
                        font-size: 22rpx;
                        color: #666;
                        min-width: 60rpx;
                        text-align: right;
                    }
                }
            }
            
            .achievement-reward {
                margin-left: 20rpx;
                padding: 8rpx 16rpx;
                background: rgba(255, 107, 107, 0.1);
                border-radius: 30rpx;
                
                .reward-text {
                    font-size: 24rpx;
                    color: #FF6B6B;
                }
            }
        }
    }
}

.background-animation {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1;

    .bubble {
        position: absolute;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.3);
        animation: float 8s infinite;
        
        @for $i from 1 through 10 {
            &:nth-child(#{$i}) {
                $size: random(60) + 20 + px;
                width: $size;
                height: $size;
                left: random(100) * 1%;
                animation-delay: random(8) * -1s;
                animation-duration: (random(4) + 6) * 1s;
            }
        }
    }
}

@keyframes float {
    0% {
        transform: translateY(100vh) scale(0);
        opacity: 0;
    }
    50% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(-100px) scale(1);
        opacity: 0;
    }
}
</style>
